<template>
	<view>
		<!-- 评论列表 -->
		<view class="comments">
			<view class="title gohere" id="gohere" ref="gohere">最新评论</view>
			<view class="no-comment" v-if="commentList.length == 0&&loadingStatus==1
			">暂无评论</view>
			<view v-for="(commentItem, index) in commentList" :key="index" class="one-comment"
				:class=" index == commentList.length-1 ? 'last-comment' : ''">
				<!-- 一级评论相关 -->
				<view class="commenter">
					<view class="info">
						<view class="left-block"
							@tap="openComment(commentItem.id, commentItem.user.id, commentItem.user.name, true ,commentItem.status)">
							<u-avatar size="50" class="avatar"
								:src="!!commentItem.user.avatar.url ? commentItem.user.avatar.url : commentItem.user.avatar" />
							<view class="name">{{ commentItem.user.name }}</view>
						</view>
						<view class="right-block">
							{{index+1}} 楼
						</view>
					</view>
					<view  :class="{'content': commentItem.status != 2 ,'content--disable': commentItem.status == 2 }"
						@tap="openComment(commentItem.id, commentItem.user.id, commentItem.user.name, true , commentItem.status)">
						{{  commentItem.status==2? '用户已删除该评论' : commentItem.body }}
					</view>
					<view class="bottom-block">
						<view class="uptime">{{ commentItem.created_at | timeFormate }} 评论</view>
						<view class="like-block">
							<image class="min-icon" v-if="commentItem.status!=2"
								:src=" commentItem.liked ? '../../static/lover.png' : '../../static/love.png' "
								mode="aspectFit" @tap="likeThisComment(commentItem.id)" />
							<text class="min-text" v-if="commentItem.likes_count > 0">{{ commentItem.likes_count }}</text>
						</view>
					</view>
				</view>
				<!-- 二级评论相关 -->
				<view v-for="(childComment, cindex) in commentItem.child_comment" :key="cindex"
					class="commenter replay">
					<view class="info">
						<view class="left-block"
							@tap="openComment(childComment.id, childComment.user.id, childComment.user.name, false ,childComment.status)">
							<u-avatar size="50" class="avatar"
								:src="!!childComment.user.avatar.url ? childComment.user.avatar.url : childComment.user.avatar" />
							<view class="name">
								<text>{{ childComment.user.name }}</text>
								<text class="ret">回复</text>
								<text>{{ commentItem.user.name }}</text>
							</view>
						</view>
						<view class="right-block">
							<image class="min-icon" v-if="childComment.status!=2"
								:src=" childComment.liked ? '../../static/lover.png' : '../../static/love.png' "
								mode="aspectFit" @tap="likeThisComment(childComment.id)" />
							<text class="min-text" v-if="childComment.likes_count > 0">{{ childComment.likes_count }}</text>
						</view>
					</view>
					<view  :class="{'content': childComment.status != 2 ,'content--disable': childComment.status == 2 }"
						@tap="openComment(childComment.id, childComment.user.id, childComment.user.name, false , childComment.status)">
						{{  childComment.status==2? '用户已删除该评论' :  childComment.body }}
					</view>
					<view class="bottom-block uptime">{{ childComment.created_at | timeFormate }} 评论</view>
				</view>
			</view>
			<view class="ios-bottom"></view>
			<view class="bottom-tip" v-if="bottomStatus===1 &&commentList.length>0">
			<view class="center-line">
			</view>	已展示全部评论
			<view class="center-line">
			</view>	
			</view>
			<view class="bottom-tip" v-if="bottomStatus===0" @tap="requestCommentAgin()">
				努力加载中…
			</view>
			<view class="bottom-tip" v-if="bottomStatus===2">
				加载失败，点击加载更多评论
			</view>
		</view>
		
		<!-- 底部交互 -->
		<view class="tab-bar">
			<view class="minput" @tap="openComment(0, 0, '', true)">说点什么···</view>
			<view class="mview">
				<!-- 点赞相关统计 -->
				<view class="mbtn" @tap="sendLove">
					<image class="micon" v-if="type=='info'"
						:src=" oneData.liked ? '../../static/lover.png' : '../../static/love.png' " mode="aspectFit" />
					<image class="micon" v-if="type=='feeds'"
						:src=" oneData.has_liked ? '../../static/lover.png' : '../../static/love.png' "
						mode="aspectFit" />

					<text class="mtext" v-if="type=='info' && oneData.likes_count>0 ">{{ oneData.likes_count }}</text>
					<text class="mtext" v-if="type=='info' && oneData.likes_count<=0 ">点赞</text>
					<text class="mtext" v-if="type=='feeds' && oneData.like_count>0 ">{{ oneData.like_count }}</text>
					<text class="mtext" v-if="type=='feeds' && oneData.like_count<=0 ">点赞</text>
				</view>

				<!-- 评论相关统计 -->
				<view class="mbtn" @tap="gotoComment">
					<image class="micon" src="../../static/msg.png" mode="aspectFit" />
					<text class="mtext"
						v-if="type=='info' && oneData.comments_count>0 ">{{ oneData.comments_count }}</text>
					<text class="mtext" v-if="type=='info' && oneData.comments_count<=0 ">评论</text>
					<text class="mtext"
						v-if="type=='feeds' && oneData.feed_comment_count>0 ">{{ oneData.feed_comment_count }}</text>
					<text class="mtext" v-if="type=='feeds' && oneData.feed_comment_count<=0 ">评论</text>
				</view>

				<!-- 转发次数统计 -->
				<button class="mbtn mhare" open-type="share" v-show="loginState" @tap="gotoShare">
					<image class="micon" src="../../static/wx.png" mode="aspectFit" />
					<text class="mtext">分享</text>
				</button>
				<button class="mbtn mhare" v-show="!loginState" @tap="gotoShare">
					<image class="micon" src="../../static/wx.png" mode="aspectFit" />
					<text class="mtext">分享</text>
				</button>
			</view>
		</view>
		<view class="commentBox" v-if="loginState && showCommentBox">
			<view class="header">
				<text class="title">发表评论</text>
				<u-icon class="icon" name="arrow-down-fill" color="#999" size="28" @tap="closeComment" />
			</view>
			<textarea class="texta" placeholder-style="color:#888" :placeholder="placeholder" cursor-spacing="150"
				:focus="true" :fixed="true" :value="cinput" @input="getInput" />
			<div class="btns">
				<button class="mini-btn" type="primary" size="mini" @tap="sendComment"
					:disabled="!canCommentTag">发布</button>
				<button class="mini-btn" type="default" size="mini" @tap="closeComment">取消</button>
			</div>
		</view>
		<!-- 未登录登陆组件 -->
		<login ref="login"></login>
	</view>
</template>

<script>
	const ALL_SHOW_TEXT= '已展示全部评论'
	const LOADINT_TEXT ='努力加载中…'
	const LOADING_ERROR_TEXT='加载失败，点击加载更多评论'
	import timeFrom from "@/uview-ui/libs/function/timeFrom.js";
	export default {
		props: {
			data: Object,
			type: String,
		},
		data() {
			return {
				// 登陆状态
				loginState: false,
				// 当前动态评论列表详情
				commentList: [],
				// 是否显示评论盒子
				showCommentBox: false,
				// 转存父组件通信数据
				oneData: {},
				// 获取 textarea 输入内容
				placeholder: "想说点什么...",
				cinput: "",
				reply_comment_id: 0,
				reply_user_id: 0,
				replay_user_name: "",
				canCommentTag: true,
				// 点赞状态器
				canLoveTag: true,
				// 当前页面
				currentPage: '' ,
				//总条数
				totallNum:0,
				//总页数
				totallPage:1,
				//每页条数
				perPage: 0  ,		
				// 加载状态  0 加载中 1 成功 2 失败 3未加载状态
				loadingStatus:''
			};
		},
		async created() {
			this.oneData = this.data;
			this.getCommentsList();
			this.loginState = await this.$u.api.checkLogin();
			uni.$on("after:login", async () => {
				this.loginState = await this.$u.api.checkLogin();
			})
		},
		computed:{
			//底部 类型
			//0  等待中
			//1   已展示全部
			//2   失败
			// 3 不显示
			bottomStatus(){
				if(this.totallPage == this.currentPage){
								return 1 ;
				} else if(this.loadingStatus===0){
								return  0;
				}else if(this.loadingStatus == 2){
								return 2 ;
				}
				return 3;
				
			}
			
		},
		methods: {
			// 分享当前动态或者资讯
			async gotoShare() {
				if (!this.loginState) {
					this.$refs.login.open();
					return
				}
				this.$$Rangers.event('share_click', {
					page_name: this.type == "feeds" ? '动态分享' : '长文资讯',
					platform: '小程序',
				})
			},
			// 再次请求评论 
			requestCommentAgin(){
				this.bottomAddData() ;
			},
			// 跳转到评论列表
			async gotoComment() {
				if (!this.loginState) {
					this.$refs.login.open();
					return;
				}
				const query = uni.createSelectorQuery().in(this);
				query.select('#gohere').boundingClientRect(data => {
					uni.pageScrollTo({
						duration: 500,
						scrollTop: data.top
					})
				}).exec();
			},
			// 下滑到底部刷新数据
			bottomAddData(){
				if(this.loadingStatus===0){
					return; 
				}
				let page  = this.currentPage +1 ;
				this.getCommentsList(page) ;		
			},
			// 获取评论列表
			 getCommentsList(page,isReNew) {
				if(!page){
					page = this.currentPage ;
				}
				if(page >this.totallPage){
					return ;
				}
				if (this.type == "feeds") {
					// 获取当前动态评论列表信息
					
					this.$u.api.getFeedComments({
						id: this.oneData.id,
					}).then(res=>{
						this.commentList = res.comments ;
					})
					
				//	this.commentList = comments.comments;
				} else {
				this.loadingStatus = 0 ;
					// 获取当前资讯评论列表信息
				this.$u.api.getInfoComments({
						id: this.oneData.id,
						page:page
					}).then((res)=>{
						isReNew? this.commentList = res.data :
						this.commentList =[...this.commentList ,...res.data]  ;
						this.totallNum = res.total ;
						this.totallPage = res.last_page ;
						this.currentPage = res.current_page ;
						this.perPage = res.per_page ;
						this.loadingStatus = 1 ;
						console.log(this.currentPage)
					}).catch((error)=>{
						uni.$emit("loadingError")
						this.loadingStatus =2 ;
					})
				}
			},
			// 点赞当前资讯、动态
			async sendLove() {
				if (!this.loginState) {
					this.$refs.login.open();
					return
				}
				if (!this.canLoveTag) return;
				this.canLoveTag = false;

				if (this.type == "info") {
					if (this.oneData.liked) {
						--this.oneData.likes_count;
						this.oneData.liked = false;
						await this.$u.api.unlikeThisInfo({
							id: this.oneData.id
						});
						uni.showToast({
							title: "取消点赞",
							icon: "success",
							duration: 1000,
						});
						uni.$emit("indexLoveChange", {
							type: this.type,
							data: this.oneData,
						});

						this.canLoveTag = true;
					} else {
						++this.oneData.likes_count;
						this.oneData.liked = true;
						await this.$u.api.likeThisInfo({
							id: this.oneData.id
						});
						// 数据埋点
						this.$$Rangers.event('interact', {
							interact_type: '点赞',
							content_type: '资讯',
							platform: '小程序',
						})
						uni.showToast({
							title: "点赞成功",
							icon: "success",
							duration: 1000,
						});
						uni.$emit("indexLoveChange", {
							type: this.type,
							data: this.oneData,
						});

						this.canLoveTag = true;
					}
				} else {
					// 动态点赞
					if (this.oneData.has_liked) {
						--this.oneData.like_count;
						this.oneData.has_liked = false;
						await this.$u.api.unlikeThisFeed({
							id: this.oneData.id
						});
						uni.showToast({
							title: "取消点赞",
							icon: "success",
							duration: 1000,
						});
						uni.$emit("indexLoveChange", {
							type: this.type,
							data: this.oneData,
						});
						uni.$emit('detailInfoTo', {
							id: this.oneData.id
						})
						uni.$emit("userLoveChange", {
							data: this.oneData,
						});
						this.canLoveTag = true;
					} else {
						++this.oneData.like_count;
						this.oneData.has_liked = true;
						await this.$u.api.likeThisFeed({
							id: this.oneData.id
						});
						// 数据埋点
						this.$$Rangers.event('interact', {
							interact_type: '点赞',
							content_type: '动态',
							platform: '小程序',
						})
						uni.showToast({
							title: "点赞成功",
							icon: "success",
							duration: 1000,
						});
						uni.$emit("indexLoveChange", {
							type: this.type,
							data: this.oneData,
						});
						uni.$emit('detailInfoTo', {
							id: this.oneData.id
						})
						uni.$emit("userLoveChange", {
							data: this.oneData,
						});
						this.canLoveTag = true;
					}
				}
			},
			// 点赞其中一条评论
			async likeThisComment(id) {
				if (!this.canLoveTag) return;
				this.canLoveTag = false;
				if (this.loginStatus) return;
				
				this.commentList.forEach((comment)=>{
					if(comment.id==id){
						comment.liked = !comment.liked ;
						comment.liked? comment.likes_count++ :
						comment.likes_count--;
					}
					let childComment = comment.child_comment[0] ;
					if(childComment?.id ==id){
						childComment.liked = !childComment?.liked ;
						childComment.liked? childComment.likes_count++ :
						childComment.likes_count--
					}
				})
				await this.$u.api.likeThisComment({
					cid: id,
					type: this.type,
					tid: this.oneData.id,
				});
				this.canLoveTag = true;
				
			},
			// 获取输入内容 监听输入内容
			getInput(e) {
				this.cinput = e.detail.value;
			},
			// 打开评论盒子
			async openComment(
				reply_comment_id,
				reply_user_id,
				replay_user_name,
				replay_level ,
				status
			) {
				this.reply_comment_id = reply_comment_id;
				this.reply_user_id = reply_user_id;
				this.replay_user_name = replay_user_name;
				
				// 删除评论不可回复
				if(status==2){
					return
				}
				// 如果是二级评论首先修改提示内容
				if (replay_user_name != "") {
					this.placeholder = "回复 " + replay_user_name + "：";
				} else {
					this.placeholder = "想说点什么...";
				}
				if (!this.loginState) {
					this.$refs.login.open();
					return;
				}
				// 获取到当前用户的ID是什么
				// 如果是自己操作自己评论 走选项卡操作
				if (reply_user_id == uni.getStorageSync("user")?.data?.id) {
					if (replay_level) {
						uni.showActionSheet({
							itemList: ["回复", "删除"],
							success: async (res) => {
								if (res.tapIndex == 1) {
									this.showCommentBox = false;
									console.log("删除自己的1级评论");
									// 这里要注意，删除一级评论， 下面的二级评论也会同步删除，所以这里需要进行计算
									let cutNum = 0;
									this.commentList.map((item) => {
										if (item.id == reply_comment_id) {
											cutNum = item.child_comment.length + 1;
										}
									});
									
									this.commentList.forEach((comment)=>{
										if(comment.id==reply_comment_id){
											comment.status = 2 
										}
										let childComment = comment.child_comment ;
										if(childComment?.id == reply_comment_id){
											comment.status = 2 ;
										}
									})
									
									await this.$u.api.deleteComment({
										type: this.type,
										id: this.oneData.id,
										comment_id: reply_comment_id,
									});
								
									if (this.type == "feeds") {
										this.oneData.feed_comment_count -= cutNum;
										uni.$emit("userCommentChange", {
											data: this.oneData,
										});
										uni.$emit('commentTo', {
											num: cutNum,
											id: this.oneData.id
										})
									} else {
										this.oneData.comments_count -= cutNum;
									}

									uni.showToast({
										title: "删除成功",
										icon: "success",
										duration: 1000,
									});
								} else {
									this.showCommentBox = true;
								}
							},
							fail: (res) => {
								console.log(res.errMsg);
							},
						});
					} else {
						this.showCommentBox = false;
						uni.showActionSheet({
							itemList: ["删除"],
							success: async (res) => {
								if (res.tapIndex == 0) {
									console.log("删除自己的2级评论");
									await this.$u.api.deleteComment({
										type: this.type,
										id: this.oneData.id,
										comment_id: reply_comment_id,
									});
									
									this.commentList.forEach((comment)=>{
										if(comment.id==reply_comment_id){
											comment.status = 2 
										}
										let childComment = comment.child_comment ;
										if(childComment?.id == reply_comment_id){
											comment.status = 2 ;
										}
									})
									if (this.type == "feeds") {
										this.oneData.feed_comment_count--;
										uni.$emit("userCommentChange", {
											data: this.oneData,
										});
										uni.$emit('commentTo', {
											num: this.oneData.feed_comment_count,
											id: this.oneData.id
										})
									} else {
										this.oneData.comments_count--;
									}
									uni.showToast({
										title: "删除成功",
										icon: "success",
										duration: 1000,
									});
								}
							},
							fail: (res) => {
								console.log(res.errMsg);
							},
						});
					}
				} else {
					this.showCommentBox = replay_level;
				}
			},
			// 关闭评论盒子
			closeComment() {
				this.cinput = "";
				this.showCommentBox = false;
			},
			// 发送评论
			async sendComment() {
				if (!this.canCommentTag) return;
				this.canCommentTag = false;
				if (this.cinput == "") {
					uni.showToast({
						title: "评论不允许为空",
						icon: "loading",
						duration: 1000,
					});
					this.canCommentTag = true;
					return false;
				}

				// 内容安全审核
				const checkRes = await wx.serviceMarket.invokeService({
					service: 'wxee446d7507c68b11',
					api: 'msgSecCheck',
					data: {
						"Action": 'TextApproval',
						"Text": this.cinput,
					}
				});
				if (checkRes.data.Response.EvilTokens.length > 0) {
					uni.hideToast();
					uni.showModal({
						title: '发布失败',
						content: '您分享的内容涉及敏感信息：“' + checkRes.data.Response.EvilTokens[0].EvilKeywords[0] + "”",
						success: res => {
							this.cinput = "";
							this.showCommentBox = false;
							this.canCommentTag = true;
						}
					});
					return;
				}


				// 根据 评论或者二级评论 来设置传参
				let params = {};
				if (this.reply_comment_id == 0) {
					params = {
						type: this.type,
						id: this.oneData.id,
						body: this.cinput,
						reply_comment_id: 0,
					};
				} else {
					params = {
						type: this.type,
						id: this.oneData.id,
						body: this.cinput,
						reply_comment_id: this.reply_comment_id,
						reply_user: this.reply_user_id,
					};
				}
				let res = await this.$u.api.sendComment(params);
				this.cinput = "";
				this.showCommentBox = false;
				this.canCommentTag = true;
				this.getCommentsList(1,true);
				if (this.type == "feeds") {
					this.oneData.feed_comment_count++;
					uni.$emit("userCommentChange", {
						data: this.oneData,
					});
					uni.$emit('commentTo', {
						num: this.oneData.feed_comment_count,
						id: this.oneData.id
					})
					// 数据埋点
					this.$$Rangers.event('interact', {
						interact_type: '评论',
						content_type: '动态',
						platform: '小程序',
					})
				} else {
					this.oneData.comments_count++;
					// 数据埋点
					this.$$Rangers.event('interact', {
						interact_type: '评论',
						content_type: '资讯',
						platform: '小程序',
					})
				}
				// 一级评论成功跳转至评论位置
				//  if (this.reply_comment_id == 0) {
				//     this.gotoComment();
				//  }
				uni.showToast({
					title: "评论成功",
					icon: "success",
					duration: 1000,
				});
			},
		},
	
		// 过滤器
		filters: {
			timeFormate(timeDate) {
				let Time = new Date(timeDate);
				let timestemp = Time.getTime();
				let t = timeFrom(timestemp, "yyyy年mm月dd日");
				return t;
			},
		},
	};
</script>
<style lang="scss" scoped>
	.comments {
		padding: 20upx 20upx 200upx;

		.title {
			font-weight: bolder;
			font-size: 32upx;
			margin-bottom: 40upx;
		}

		.no-comment {
			text-align: center;
			margin: 120upx 0 280upx;
			color: #666;
		}

		.one-comment {

			&.last-comment {
				border-bottom: none;
			}

			.commenter {
				.info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 20upx;
					.left-block {
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;
						align-items: center;
						align-content: center;

						.avatar {
							margin-right: 20upx;
							margin-top: 10upx;
						}

						.name {
							font-size: 24upx;
							font-weight: bolder;
							color: #1f2046;
						}
					}

					.right-block {
						font-size: 30upx;
						font-family: SourceHanSansSC-Regular, SourceHanSansSC;
						font-weight: 400;
						color: #999;
						padding-right: 26upx;
					}
				}

		
				.uptime {
					color: #999;
					font-size: 20upx;
				}

			
			}
		}
	}
	.bottom-block:last-child{
			border-bottom: 0upx ;
	}

	
	
	.bottom-block {
		margin: 0  26upx 0 70upx ;
		padding:  10upx 0  20upx 0 ;
		border-bottom: 1upx solid #f2f2f2;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.like-block{
		display: flex;
		align-items: center;
	}
	
	.min-icon {
		width: 32upx;
		height: 32upx;
		margin-right: 10upx;
	}
	
	.min-text {
		color: #999;
		font-size: 32upx;
	}
	.content {
		font-size: 30upx;
		line-height: 50upx;
		margin: 10upx 20upx 0 70upx ;
	}
	
	.content--disable{
		font-size: 30upx;
		//line-height: 50upx;
		margin: 10upx 20upx 0 70upx ;
		text-align: center;
		color:rgba($color: #000000, $alpha: .4)
	}
	
	.bottom-tip{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36upx;
		//line-height: 50upx;
		margin: 40upx 0 0  0 ;
		color:rgba($color: #000000, $alpha: .4)
		
	}
	.center-line{
		margin: 0 10upx;
		height: 1upx;
		width: 15vw;
		border: 3upx solid rgba($color: #000000, $alpha: .4);
	}
	.replay {
		width: 710upx;

		.avatar {
			padding-left: 70upx;
		}

		.right {
			padding-right: 0;

			.micon {
				width: 32upx;
				height: 32upx;
			}
		}

		.name {
			.ret {
				color: #999;
				margin: 0 10upx;
			}
		}

		// .content {
		// 	margin-left: 0;
		// }

		// .uptime {
		// 	margin-left: 0;
		// }
	}

	.tab-bar {
		position: fixed;
		width: 750upx;
		height: 120upx;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		color: #ccc;
		border-top: 1upx solid #f6f6f6;
		background-color: #fff;

		.minput {
			background-color: #eee;
			height: 60upx;
			width: 300upx;
			border-radius: 30upx;
			padding-left: 30upx;
			margin-left: 20upx;
			line-height: 60upx;
			color: #AAAAAA;
			font-size: 22upx;
		}

		.mview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			align-content: center;
			color: #ccc;
			margin-right: 25upx;

			.mbtn {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
				align-items: center;
				align-content: center;
				width: 120upx;
				background-color: #fff;

				&.mhare {
					width: 150upx;
				}
			}

			.mbtn::after {
				border: none;
				background-color: none;
			}

			.micon {
				width: 36upx;
				height: 36upx;
			}

			.mtext {
				color: #001432;
				font-size: 24upx;
				margin-left: 10upx;
			}
		}


	}

	.commentBox {
		position: fixed;
		width: 750upx;
		height: 250px;
		left: 0;
		bottom: 0;
		border-top: 1upx solid #eee;
		background-color: #fafafa;

		.header {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			align-content: center;
			padding: 20upx 15px 20upx 25px;

			.title {
				color: #999;
				font-size: 28upx;
				font-weight: bold;
			}

			.icon {
				padding: 20upx;
			}
		}

		.texta {
			width: 600upx;
			height: 100px;
			margin-left: 50upx;
			padding: 10px 25upx;
			border: 1upx solid #ddd;
			border-radius: 10upx;
			background: #fff;
			font-size: 28upx;
		}

		.btns {
			width: 650upx;
			margin-left: 50upx;
			margin-top: 15px;
			text-align: right;

			.mini-btn {
				margin-left: 40upx;
			}
		}
	}
</style>
